<template>
	<view class="cantainer">
		<view class="search-box">
			<my-search @click="gotoSearch"></my-search>
		</view>
		<view class="category-box">
			<view class="left-box">
				<block v-for="(item,index) in categoryTypeArr" :key="item.id">
					<view class="menu-item" :class="[currentMenuIndex===index?'selected':'']"
						@click="changeCategory(index,item.id)">{{item.name}}</view>
				</block>
			</view>
			<view class="right-box">
				<view class="foods-type-box">
					<category-card :data='categoryProducts' @onProductsItemTap="onProductsItemTap"></category-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js';
	export default {
		mixins: [badgeMix],
		data() {
			return {
				categoryTypeArr: [],
				categoryProducts: {},
				currentMenuIndex: 0,
				transClassArr: ['tanslate-0', 'tanslate-1', 'tanslate-2', 'tanslate-3', 'tanslate-4', 'tanslate-5'],
			};
		},
		async onLoad() {
			this.CategoryData([2,3,4,5,6,7])
		},
		onReady() {

		},
		methods: {
			onProductsItemTap(id) {
				uni.navigateTo({
					url: "/page_roduct_detail/product/product?id=" + id
				})
			},
			async changeCategory(index, category_id) {
				this.currentMenuIndex = index
				this.CategoryData(category_id)
			},
			
			//获取分类左边的标签和右边的头图和分类文字
			async CategoryData(id) {
				let categoryTypeArr = await uniCloud.callFunction({
					name: 'getAllCategories',
					data: {
						id
					}
				})
				// console.log(typeof id); //object
				// console.log(id);
				// console.log(categoryTypeArr.result.data[0].image[0].url);
				// console.log(id instanceof Array);
				if (id instanceof Array) {
					this.categoryTypeArr = categoryTypeArr.result.data
				}

				let categoryProducts = await uniCloud.callFunction({
					name: 'getAllInCategory',
					data: {
						category_id: id instanceof Array ? categoryTypeArr.result.data[0].id : id
					}
				})

				let categoryProductsObj = {
					products: categoryProducts.result.data,
					topImgUrl: categoryTypeArr.result.data[0].image[0].url,
					title: categoryTypeArr.result.data[0].name
				}
				this.categoryProducts = categoryProductsObj
				uni.setNavigationBarTitle({
				　　title:this.categoryProducts.title
				})
				console.log(this.categoryProducts);
			},
			// 搜索栏点击事件
			gotoSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			}
		},
	}
</script>

<style lang="scss">
	.cantainer {
		.category-box {
			display: flex;
			height: 100vh;
			overflow: hidden;

			.left-box {
				flex: 0 0 150rpx;
				border-right: 1rpx solid #D8D8D8;

				.menu-item {
					height: 50rpx;
					padding: 40rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					border-left: 6rpx solid #fff;


					&.selected {
						color: #AB956D;
						border-left-color: #AB956D;
						background-color: rgba(173, 149, 107, 0.1);
						// background-color:transparent;
					}
				}
			}

			.right-box {
				flex: 1;
				transition: all 500ms ease-in-out;

				.foods-type-box {
					// margin-top: 15rpx;
					height: 100%;
					margin-bottom: var(--window-bottom);
				}
			}

			.tanslate-0 {
				transform: translate(0, 0);
			}

			.tanslate-1 {
				transform: translate(0, -100vh);
			}

			.tanslate-2 {
				transform: translate(0, -200vh);
			}

			.tanslate-3 {
				transform: translate(0, -300vh);
			}

			.tanslate-4 {
				transform: translate(0, -400vh);
			}

			.tanslate-5 {
				transform: translate(0, -500vh);
			}
		}
	}
	
	// .search-box {
	//   // 设置定位效果为“吸顶”
	//   position: sticky;
	//   // 吸顶的“位置”
	//   top: 0;
	//   // 提高层级，防止被轮播图覆盖
	//   z-index: 999;
	// }
</style>
